<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <link href="css/index.css" rel="stylesheet">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/index.js"></script>
    <script src="js/socket.js"></script>
    <title>QQ</title>
</head>
<body>
<div id="chat-box">
    <div id="chat-box-left">
        <div class="box-left-top">
            <label for="input-phone">搜索：</label>
            <input id="input-phone" name="phone" placeholder="请输入手机号" type="text">
            <button id="search">搜索</button>
        </div>
        <div class="box-left-center">
            <ul>
            </ul>
        </div>
        <div class="box-left-bottom">
            <div class="operation black">聊天</div>
            <div class="operation" onclick="getFriendTable()">好友</div>
            <div class="operation">群组</div>
            <div class="operation" onclick="show('.exit')">设置</div>
        </div>
    </div>
    <div id="chat-box-right">
        <div class="box-right-top">
            <div class="box-right-top-operation">聊天</div>
            <div class="friend-name" friend-id="" groups-id=""></div>
        </div>
        <div class="box-right-center">
            <ul class="scrollable-list">

            </ul>
        </div>
        <div class="box-right-bottom">
            <textarea id="messageInput" placeholder="输入消息..."></textarea>
            <button id="sendButton">发送</button>
        </div>
    </div>
</div>
<!--注册弹框-->
<div class="login-box register">
    <div class="login-frame">
        <h1 style="text-align: center;">用户注册</h1>
        <div id="error-msg-reg">
        </div>
        <label for="register-nickname">用户昵称：</label><input id="register-nickname" name="nickname"
                                                               placeholder="请输入用户昵称"
                                                               type="text"><br>
        <label for="register-password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input
            id="register-password"
            name="password" placeholder="请输入密码" type="text"><br>
        <label for="register-phone">手&nbsp;&nbsp;机&nbsp;&nbsp;号：</label><input id="register-phone" name="phone"
                                                                                  placeholder="请输入手机号"
                                                                                  type="text"><br>
        <button id="register">注&nbsp;&nbsp;册</button>
        <p style="text-align: right;margin-top: 20px">已有账户，前往<i onclick="show('.login')" style="cursor: pointer;">登录</i>
        </p>
    </div>
</div>
<!--登录弹框-->
<div class="login-box login">
    <div class="login-frame">
        <h1 style="text-align: center;">用户登录</h1>
        <div id="error-msg">
        </div>
        <label for="username">用户名：</label><input id="username" name="username" placeholder="请输入用户名"
                                                    type="text"><br>
        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input id="password" name="password"
                                                                          placeholder="请输入密码" type="text"><br>
        <button id="login">登&nbsp;&nbsp;录</button>
        <p style="text-align: right;margin-top: 20px">没有账户，前往<i onclick="show('.register')"
                                                                      style="cursor: pointer;">注册</i></p>
    </div>
</div>
<div class="login-box exit">
    <h1 onclick="loginOut()">退出登录</h1>
    <h1 style="margin-left: 120px" onclick="hide('.exit')">取消</h1>
</div>
</body>
</html>